<template>
  <v-navigation-drawer v-model="drawer" :width="smAndDown?250:400" location="right">
    <v-card>
      <v-card-title class="d-flex justify-space-between align-center">
        <p class="text-h6">绘图历史</p>
        <v-spacer/>
        <!--        手动刷新-->
        <v-btn icon="mdi-refresh" variant="text" @click="handleGetHistory"></v-btn>
        <v-btn
            icon="mdi-close"
            variant="text"
            @click="handleCloseDrawer"
        ></v-btn>
      </v-card-title>
      <v-card-text>
        <v-row>
          <v-col v-for="(history,index) in historyData" :key="index" cols="12">
            <v-sheet>
              <!--         显示创建时间，并格式化日期格式-->
              <v-label>{{ new Date(history?.created_at).toLocaleString() }}</v-label>
              <v-divider></v-divider>
            </v-sheet>
            <v-sheet class="d-flex justify-end">

              <!--        返图修改-->
              <!--            <v-btn prepend-icon="mdi-pencil" variant="plain">去返图</v-btn>-->
              <!--       画同款-->
              <!--            <v-btn prepend-icon="mdi-pencil" variant="plain">画同款</v-btn>-->
              <!--        删除-->
              <v-btn @click="handleDelete(history?._id)" prepend-icon="mdi-delete" size="small" variant="plain"></v-btn>
            </v-sheet>
            <v-sheet v-if="history.type==='image'">
              <v-label>提示词：{{ history.params?.positive }}</v-label>
              <v-row>
                <v-col class="d-flex pa-6" :cols="history.output?.length>1?6:12" v-for="(output,index) in history.output" :key="index" width="80%">
                  <v-img @click="isPreView=true;prrviewSrc=output" :lazy-src="`${output}-lazy`" class="cursor-pointer" :src="output" cover width="50%">
                    <template v-slot:placeholder>
                      <div class="d-flex align-center justify-center fill-height">
                        <v-progress-circular
                            color="grey-lighten-4"
                            indeterminate
                        ></v-progress-circular>
                      </div>
                    </template>
                  </v-img>
                </v-col>
              </v-row>
              <template >

              </template>
            </v-sheet>
            <v-sheet v-else-if="history.type==='text'&&history.output">
              <v-label class="mb-2">反推提示词：</v-label>
              <a-textarea v-model:value="history.output[0]" :auto-size="{minRows: 3, maxRows: 6}" :rows="3"/>
            </v-sheet>
            <v-sheet v-else-if="history.type==='video' && history.output">
              <template v-for="(output,index) in history.output" :key="index">
              <video-player :src="output"></video-player>
              </template>
            </v-sheet>
          </v-col>
        </v-row>
      </v-card-text>
    </v-card>
    <image-preview-full v-model:visible="isPreView" v-model:src="prrviewSrc"/>
  </v-navigation-drawer>
</template>
<script setup lang="ts">

import type {DrawHistoryItem} from "~/utils/comfyuiApi";
import VideoPlayer from "~/components/video/VideoPlayer.vue";
import ImagePreviewFull from "~/components/ai/ImagePreviewFull.vue";

const drawer = defineModel({
  default: false
})

const {user} = useAuthStore()
const historyData = ref<DrawHistoryItem[]>([])

onMounted(async () => {
  handleGetHistory()
})


//获取绘画历史
const handleGetHistory = async () => {
  if (!user || !user._id) return
  const res = await Client_GET('/draw/history/' + user?._id) as DrawHistoryItem[]
  console.log('获取的绘画历史记录', res)
  if (res) {
    //支取历史记录的前10条
    historyData.value = res.slice(0,10)
  }
}
/**
 * 根据id删除对应的元素
 * @param id
 */
const handleDelete = async (id: string) => {
  const res = await Client_DELETE('/draw/history/' + id)
  console.log('删除的绘画历史记录', res)
  if (res) {
    historyData.value = historyData.value.filter(item => item._id !== id)
    useSnackbarStore().showSuccessMessage('删除成功')
  }
}

const handleCloseDrawer = () => {
  drawer.value = false
}
const {smAndDown}=useDisplay()

//全屏预览图片
const isPreView = ref(false)
const prrviewSrc = ref('')


</script>